<template>
  <div class="info">
    <div class="name">
      账户 - {{storeName}}
      <a-icon type="sync" class="icon" title="刷新" :spin="spin" @click="goRefresh" />
      <!-- <a-button type="primary" style="margin-left:10px" @click="goBaidu">前往百度营销</a-button> -->
    </div>
    <div class="list">
      <div class="status">
        <span class="title weight">状态</span> 
        <div class="dot dotstatus1" :class="getUserStatColor(userStat)"></div> 
        {{userStat | setUserStat}}
      </div>
      <div class="yu">
        <span class="weight">推广余额</span>
        <span class="weight" style="margin-left:8px">{{balance}}</span>
      </div>
      <div class="ri">
        <span class="weight">日预算</span>
        <span class="weight" style="margin-left:8px">{{budget}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'info',
  props:{
    balance:{
      type:[Number,String],
      default:0
    },
    budget:{
      type:[Number,String],
      default:0
    },
    userStat:[Number,String],
    userId:[Number,String],
  },
  data(){
    return{
      spin:false,
      spinTimeOut: null
    }
  },
  methods:{
    getUserStatColor(status){
      switch(status){
        //1：开户金未到 2：生效 3：账户余额为0 4：被拒绝 6：审核中 7：被禁用 8：待激活 11：账户预算不足
        case 1:case '1':
        case 3:case '3':
        case 4:case '4':
        case 6:case '6':
        case 7:case '7':
        case 8:case '8':
        case 11:case '11':
          return 'dotstatus2'
        case 2:case '2':
          return 'dotstatus1'
      }
    },
    goBaidu(){
      let a = document.createElement('a')//创建一个a标签
      a.setAttribute("href", 'https://feedads.baidu.com/nirvana/main.html?userid='+this.userId);//添加URL
      a.setAttribute('target', "_blank")//设置target属性
      a['click']() //触发事件
    },
    goRefresh(){
      clearTimeout(this.spinTimeOut)
      this.spin = true
      this.spinTimeOut = setTimeout(() => {
        this.spin = false
      }, 800);
      this.$emit("refresh")
    }
  },
  computed:{
    storeName(){
      return this.$store.state.dianpu.name
    }
  },
  filters:{
    setUserStat(e){
      switch(e){
        //1：开户金未到 2：生效 3：账户余额为0 4：被拒绝 6：审核中 7：被禁用 8：待激活 11：账户预算不足
        case 1:case '1':
          return '开户金未到'
        case 2:case '2':
          return '生效'
        case 3:case '3':
          return '账户余额为0'
        case 4:case '4':
          return '被拒绝'
        case 6:case '6':
          return '审核中'
        case 7:case '7':
          return '被禁用'
        case 8:case '8':
          return '待激活'
        case 11:case '11':
          return '账户预算不足'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.weight{
  font-weight: 700;
}
.dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.dotstatus1{
  background-color: #00cc63;
}
.dotstatus2{
  background-color: #ff7875;
}
.info{
  padding: 20px 28px 16px;
  border-radius: 6px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  .name{
    font-size: 14px;
    color: #282c33;
  }
  .list{
    display: flex;
    align-items: center;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #282c33;
    margin-top: 8px;
    .status{
      // width: 108px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 32px;
      .title{
        margin-right: 12px;
      }
      .dot{
        margin-right: 6px;
      }
    }
    .yu{
      display: flex;
      align-items: center;
      padding-right: 32px;
    }
    .ri{
      display: flex;
      align-items: center;
    }
  }
}
</style>